<template>
    <div class="salesReturn">
        <Card >
            <Row>
                <Col span="24">
                    <Form ref="salesReturnRef" :model="salesReturnForm" :rules="salesReturnRule" >
                        <div class="salesReturn-box">
                            <div class="flex space-between align-center">
                                <Form-item prop="searchModel">
                                    <Input placeholder="请输入退货原因" :maxlength=20 v-model="salesReturnForm.searchModel" style="width:200px"  @on-enter="searchEnter" enter-button/> 注:按回车键进行搜索
                                </Form-item>
                                <Button type="primary" @click.native="openSalesReturn">添加</Button>
                            </div>
                        </div>
                    </Form>
                    <Table :columns="salesReturnColumns" :data="salesReturnData"></Table>
                    <Page
                        ref="freightRateListPage"
                        :total="searchData.totalElements"
                        :page-size="searchData.size"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                        show-sizer
                        :page-size-opts="[5, 10, 20, 30, 40]"
                        show-total
                        style="margin-top:30px;text-align:center;">
                    </Page>
                    <!-- 新增/编辑弹窗 -->
                    <Modal v-model="addFSalesReturn" :mask-closable="false">
                        <p slot="header">
                            <span>{{salesTitle}}</span>
                        </p>
                        <div>
                            <Form ref="addFSalesReturnRef" :model="addFSalesReturnForm" :rules="addFSalesReturnRule" :label-width=80>
                                 <FormItem label="原因类型" prop="reasonType">
                                    <Input v-model="addFSalesReturnForm.reasonType" :maxlength="20" placeholder="请输入原因" style="width: 400px"/>
                                </FormItem>
                                 <FormItem label="排序" prop="sort">
                                    <Input v-model="addFSalesReturnForm.sort" :maxlength="20" type="textarea" :autosize="{minRows: 2,maxRows: 4}" placeholder="Enter something..." style="width: 400px" />
                                </FormItem>
                                <FormItem>
                                    <span>是否启用</span>
                                    <i-switch v-model="addFSalesReturnForm.isActive" size="large">
                                        <span slot="open">是</span>
                                        <span slot="close">否</span>
                                    </i-switch>
                                </FormItem>

                            </Form>
                        </div>
                        <div slot="footer" class="footer ta-r">
                            <Button type="primary" @click.native="closeLogist">取消</Button>
                            <Button type="primary" @click.native="submitLogist('addFSalesReturnRef')" :loading="submitLoading">提交</Button>
                        </div>
                    </Modal>

                </Col>
            </Row>
        </Card>
    </div>
</template>
<script>
export default {
    name: 'salesReturn',
    props: ['shopIds'],
    data () {
        return {
            // 弹窗标题
            salesTitle: '添加原因类型',
            // 提交时 loading状态
            submitLoading: false,
            // 搜索框
            salesReturnForm: {
                searchModel: ''
            },
            salesReturnRule: {
                searchModel: [
                    { message: '请输入商品名称', trigger: 'blur' },
                    { type: 'string', max: 15, message: '最多输入15个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '只能输入汉字数字英文', trigger: 'blur' }
                ]
            },
            // 分页
            searchData: {
                name: '',
                totalElements: 1,
                page: 0,
                size: 10,
                showSpin: false
            },
            // 列表树
            salesReturnColumns: [
                {
                    title: '原因类型',
                    align: 'center',
                    minWidth: 150,
                    key: 'reasonType',
                    tooltip: true
                },
                {
                    title: '排序',
                    key: 'sort',
                    minWidth: 120,
                    align: 'center',
                    tooltip: true
                },
                {
                    title: '是否启用',
                    key: 'isActive',
                    align: 'center',
                    minWidth: 150,
                    render: (h, params) => {
                        return h('i-switch', {
                            props: {
                                value: params.row.isActive
                            },
                            on: {
                                'on-change': (value) => {
                                    this.SwitchChange(params.row.id, value);
                                }
                            }
                        }, [
                            h('span', {
                                slot: 'open',
                                domProps: {
                                    innerHTML: '开'
                                }
                            }),
                            h('span', {
                                slot: 'close',
                                domProps: {
                                    innerHTML: '关'
                                }
                            })
                        ]);
                    }},
                {
                    title: '更新时间',
                    key: 'createTime',
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: 200,
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                            }, [
                                h('Button', {
                                    props: {
                                        align: 'center',
                                        type: 'primary'
                                    },
                                    on: {
                                        click: () => {
                                            this.writeSalse(params.row);
                                        }
                                    }

                                }, '编辑')
                            ]),
                            h('span', {
                            }, [
                                h('Button', {
                                    props: {
                                        align: 'center',
                                        type: 'primary'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteSalses(params.row.id);
                                        }
                                    }

                                }, '删除')
                            ])
                        ]);
                    }
                }
            ],
            // 列表树data
            salesReturnData: [],
            // 弹窗
            addFSalesReturn: false,
            addFSalesReturnForm: {
                reasonType: '',
                sort: '',
                isActive: false
            },
            addFSalesReturnRule: {
                reasonType: [
                    {required: true, message: '请输入原因类型', trigger: 'blur' },
                    { type: 'string', max: 20, message: '最多输入20个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '只能输入汉字数字英文', trigger: 'blur' }
                ],
                sort: [
                    { pattern: /^[0-9]*$/, message: '只能输入正整数', trigger: 'blur' }
                ]
            },
            shopId: ''

        };
    },
    created () {
        this.shopId = this.$route.query.id;
        this.salsesList();
        this.searchData.size = Number(localStorage.getItem('salsesSize'));
        this.searchData.page = Number(localStorage.getItem('salsesPage'));
    },
    methods: {
        // 进入页面查询模板列表
        salsesList () {
            depot.get({
                url: this.URL.EC_SELLER.FIND_BY_YTYPE_LIKE_PAGE + '?shopId=' + this.shopId +
                '&page=' + this.searchData.page + '&size=' + this.searchData.size + '&typeLike=' + this.salesReturnForm.searchModel,
                cb: (data) => {
                    if (data.code === 0) {
                        console.log(data.data.content);
                        this.salesReturnData = data.data.content;
                        this.searchData.size = data.data.size;
                        this.searchData.totalElements = data.data.totalElements;
                    } else {
                        this.$Message.error(data.message);
                    }
                }
            });
        },

        // 搜索
        searchEnter () {
            this.salsesList();
        },
        // 分页
        changePage (val) {
            this.searchData.page = val - 1;
            this.salsesList();
            localStorage.setItem('salsesPage', this.searchData.page);
        },
        changePageSize (val) {
            this.searchData.size = val;
            localStorage.setItem('salsesSize', this.searchData.size);
            this.salsesList();
        },
        // 打开弹窗
        openSalesReturn () {
            this.addFSalesReturn = true;
            this.addFSalesReturnForm = {};
        },
        // 是否启用
        SwitchChange (id, value) {
            let ids = [id];
            console.log(ids, 'ids');
            this.searchData.showSpin = true;
            depot.post({
                url: this.URL.EC_SELLER.UP_DATE_IS_ACTIVE_REFUND_REASONS_BY_IDS + '?isActive=' + value,
                data: ids,
                cb: (data) => {
                    if (data.code === 0) {
                        this.$Message.success('修改状态成功');
                        this.searchData.showSpin = false;
                        this.salsesList();
                    } else {

                    }
                }
            });
        },
        // 编辑
        writeSalse (params) {
            this.salesTitle = '编辑原因类型',
            this.addFSalesReturn = true;
            this.addFSalesReturnForm = params;
        },
        // 删除
        deleteSalses (id) {
            let ids = [];
            ids.push(id);
            depot.post({
                url: this.URL.EC_SELLER.DEL_REFUND_REASONS_BY_IDS,
                data: ids,
                cb: (data) => {
                    if (data.code === 0) {
                        this.$Message.success('删除成功');
                        this.salsesList();
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {

                }
            });
        },
        // 取消提交
        closeLogist () {
            this.addFSalesReturn = false;
            // submitLoading
            if (this.salesTitle == '添加原因类型') {
                this.$refs['salesReturnRef'].resetFields();
            }
        },
        // 确定提交
        submitLogist (name) {
            // this.addFSalesReturn = false;
            // submitLoading
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.addFSalesReturnForm.shopId = this.shopId;
                    this.submitLoading = true;
                    depot.post({
                        url: this.URL.EC_SELLER.SAVE_REFUND_REASONS,
                        data: this.addFSalesReturnForm,
                        cb: (data) => {
                            if (data.code === 0) {
                                this.$Message.success('提交成功');
                                this.salsesList();
                                this.$refs['salesReturnRef'].resetFields();
                                this.submitLoading = false;
                                this.addFSalesReturn = false;
                            } else if (data.code === 999) {
                                this.$Message.error(data.message);
                                this.submitLoading = false;
                            }
                        },
                        ce: (error) => {
                            this.submitLoading = false;
                        }
                    });
                }
            });
        }
    },
    watch: {
        shopIds (newVal, oldVal) {
            if (newVal) {
                this.shopId = newVal;
                this.salsesList();
            }
            console.log(this.shopId, 'ppp');
        }
    }
};
</script>
<style lang="less" scoped>
    .salesReturn {

        
    // 
        .flex{
            display: flex;
        }
        .space-around{
            justify-content: space-around
        }
        .space-between{
                justify-content: space-between;
        }
        .align-center{
            align-items: center
        }

    }
</style>



